<template>
  <!-- 直属代理宝箱 -->
  <BackHeader :title="$t('ranking.tc_page_title')" />
  <div class="content app_center">
    <!-- 跳转代理线宝箱 -->
    <img src="/images/ranking/Entrance_Bg.png" @click="toPage">
    <!-- 分享卡片 -->
    <ShareCard />
    <!-- 领取按钮区域 -->
    <Btn :activityData="activityData" />
    <!-- 领奖线路图 -->
    <Lines :activityData="activityData" @claim="claimReward" />
    <!-- 底部说明 -->
    <Footer :activityData="activityData" />
  </div>
  <!-- 领奖结果弹窗 -->
  <CommonResultDialog :show="showResult" :title="$t('activity.common.voce_venceu')"
    :desc="$t('activity.common.voce_venceu_desc')" :btn="$t('activity.common.confirmar')" :amount="reward"
    icon="/images/activity/common/Coin_Bg 1.png" @close="showResult = false" @sure="showResult = false" />
</template>

<script setup lang="ts">
import Btn from "./components/Btn.vue";
import Lines from "./components/Lines.vue";
import Footer from "./components/Footer.vue";


// 活动数据
const activityData = ref<{ reward?: number } & Record<string, any>>({})

// 初始化配置：拉取活动详情
function initConfig() {
  apo.activity.getActivityDetailInfo(54, (error: any, data: any) => {
    if (error) {
      apo.logger.error('getActivityDetailInfo error:', error)
      return
    }
    activityData.value = data
  })
}

// 结果弹窗显隐
const showResult = ref(false)

// 领取奖励
const reward = ref(0)
function claimReward(item: any) {
  apo.activity.claimActivityReward(54, (error: any) => {
    if (error) {
      apo.logger.error('claimActivityReward error:', error)
      return
    }
    reward.value = item.reward || 0
    showResult.value = true
    initConfig()
  }, { id: item.id })
}

// 跳转代理线宝箱
function toPage() {
  navigateTo({ 'name': 'ranking-al-treasure-chest' })
}

// 页面激活时刷新数据（keep-alive 返回时触发）
onActivated(() => {
  initConfig()
})
</script>

<style scoped lang="scss">
.content {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.25rem;
  padding-top: 1.5rem;
}
</style>
